<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>天气查询</title>
  <!-- 引入Vue 3 -->
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 使用test1组件 -->
    <test1></test1>
  </div>
  <script type="module">
    // 导入test1组件
    import test1 from './test1.vue';

    // 创建Vue应用并注册test1组件
    const app = Vue.createApp({
      components: {
        test1
      }
    });

    app.mount('#app');
  </script>

  <style>
    /* 插入你的CSS样式 */
    #app { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
    input { width: calc(100% - 80px); padding: 8px; margin-bottom: 10px; }
    button { width: 80px; padding: 8px; background-color: #2c3e50; color: white; border: none; border-radius: 4px; cursor: pointer; }
    button:hover { background-color: #3498db; }
    .loading { margin-top: 10px; color: #95a5a6; }
    .weather-info { margin-top: 20px; border-top: 2px solid #3498db; padding-top: 10px; }
    .error { color: red; margin-top: 10px; }
  </style>
</body>
</html>